<template>
  <el-dialog
    :visible.sync="isShow"
    center
    class="order-info"
    :before-close="handleClose"
  >
    <el-dialog
      title="无法退回"
      :visible.sync="WithdrawDialog"
      width="30%"
      append-to-body
      center
    >
      <div :class="orderData.pick_up_date > 48 ? 'showError' : 'showSuccess'">
        案件接单时间小于48小时<span
          >&nbsp;&nbsp;{{ orderData.pick_up_date > 48 ? "✖" : "✔" }}</span
        >
      </div>
      <div :class="orderData.cancel >= 3 ? 'showError' : 'showSuccess'">
        您当月退回案数小于3件<span
          >&nbsp;&nbsp;{{ orderData.cancel >= 3 ? "✖" : "✔" }}</span
        >
      </div>
      <div :class="finishNum != 0 ? 'showSuccess' : 'showError'">
        您当月完成案件数达到退回要求!<span
          >(案件完成数{{ orderData.finish }})</span
        ><span>&nbsp;&nbsp;{{ finishNum != 0 ? "✔" : "✖" }}</span>
      </div>
      <div :class="orderData.is_distribution == 8 ? 'showSuccess' : 'showError'">
        是否为指定派发机构案件<span
          >&nbsp;&nbsp;{{ orderData.is_distribution == 8 ? "✔" : "✖" }}</span
        >
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="WithdrawDialog = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <div class="btns tc">
      <el-button
        v-if="
          orderData.pick_up_date < 48 &&
          $store.state.user.is_teacher != 2 &&
          orderData.cancel < finishNum &&
          orderData.is_distribution == 8
        "
        type="primary"
        @click="orderRescind"
        >退回</el-button
      >
      <el-button v-else @click="WithdrawDialog = true" type="info"
        >退回</el-button
      >

      <el-button
        @click="goPay"
        type="primary"
        :disabled="
          orderData.patent_user_fee_reduction
            ? orderData.patent_user_fee_reduction.is_reduction == 3
              ? true
              : false
            : true
        "
        v-if="orderData.is_distribution == 3 && !orderData.order_pay"
        >去支付</el-button
      >

      <el-button
        v-if="
          (orderData.status == '代理人撰写中' ||
            orderData.status == '案件修改中' ||
            orderData.status == '定稿文件发送中' ||
            orderData.status == '上报文件上传中') &&
          (orderData.is_frozen == 2 || orderData.is_frozen == 3) &&
          $store.state.user.is_teacher != 2
        "
        :disabled="orderData.is_frozen == 3"
        type="danger"
        @click="applyFrozen(orderData)"
        >申请案件冻结</el-button
      >
      <el-button
        v-if="orderData.is_frozen == 1 && $store.state.user.is_teacher != 2"
        @click="relieveFrozen(orderData)"
        type="primary"
        >解除冻结</el-button
      >
    </div>
    <el-row>
      <el-steps
        :active="opDateMax"
        class="steps"
        process-status="success"
        finish-status="success"
        align-center
      >
        <el-step
          v-for="(item, index) in steps_text"
          :title="item"
          description=""
          :key="index"
        ></el-step>
      </el-steps>
    </el-row>
    <div class="fold">
      <div
        class="fold_header clearfloat"
        @click="processProgress = !processProgress"
      >
        <span class="fl">流程进度</span>
        <span class="fr">
          <i
            :class="processProgress ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
          >
          </i>
        </span>
      </div>
      <el-collapse-transition>
        <div v-show="processProgress">
          <el-timeline v-for="(item, index) in orderData.statuss" :key="index">
            <el-timeline-item
              placement="top"
              :timestamp="item.pivot.created_at"
            >
              <template slot="dot">
                <span
                  class="time"
                  v-if="index * 1 < orderData.statuss.length - 1"
                  >耗时：{{
                    intervalTime(
                      orderData.statuss[index * 1 + 1].pivot.created_at,
                      orderData.statuss[index * 1].pivot.created_at
                    )
                  }}</span
                >
                <div class="el-timeline-item__node"></div>
              </template>
              <h4 v-if="!/^(2|15|12)$/.test(item.id)">{{ item.name }}</h4>

              <div v-if="item.id == 1">
                发明人：<span class="font_success">{{
                  orderData.liaisons
                }}</span>
                提交
              </div>

              <!-- 上传定稿文件 -->
              <div
                v-if="item.id == 2 || item.id == 15 || item.id == 12"
                class="clearfloat"
              >
                <div class="fl">
                  <p class="title" v-if="item.id != 12">{{ item.name }}</p>
                  <p v-if="item.id != 12">
                    联络人：<span class="fontgreen">{{
                      orderData.liaisons
                    }}</span>
                    提交
                  </p>
                  <div
                    class="file-list mt10"
                    v-if="orderData.status == '定稿文件发送中' && index == 0"
                  >
                    <div v-if="fileListV.length">
                      <span class="sameDay font_success"
                        >是否需要与其他案件同日提交，如需要，请勾选</span
                      >
                      <el-checkbox
                        @change="sameDayCheckChange"
                        v-model="sameDay.isSameDay"
                        >{{ sameDay.isSameDay ? "是" : "否" }}</el-checkbox
                      >

                      <el-popover
                        v-if="sameDay.isSameDay"
                        placement="right"
                        width="300"
                        popper-class="sameDayList"
                        trigger="click"
                      >
                        <el-input
                          v-model="orderNumberQuery"
                          @input="queryChanged"
                          placeholder="请输入编号查询"
                        ></el-input>
                        <div
                          v-for="(item, numberIndex) in orderNumbers"
                          :key="numberIndex"
                          class="numberList"
                        >
                          <span class="number">{{ item.value }}</span>
                          <el-checkbox v-model="item.isSelect"></el-checkbox>
                        </div>
                        <el-button
                          slot="reference"
                          type="primary"
                          icon="el-icon-plus"
                          size="small"
                          class="ml10"
                        ></el-button>
                      </el-popover>

                      <div
                        v-for="(item, orderIndex) in orderNumbers"
                        :key="orderIndex"
                        class="numbers"
                      >
                        <div
                          v-if="item.isSelect"
                          class="number numberItem"
                          @mouseenter="fileListShowClose(item)"
                          @mouseleave="fileListHidClose(item)"
                        >
                          <span>{{ item.value }}</span>
                          <span class="fr" v-if="item.close">
                            <i
                              class="el-icon-close"
                              @click="closeOrderNumber(item, orderIndex)"
                            ></i>
                          </span>
                        </div>
                      </div>
                      <br />
                      <span
                        class="font_success"
                        v-if="orderData.is_distribution != 3"
                        >权利要求数超过10项的为超项数，小于等于10，超项数为0。勾选填写超项数。</span
                      >
                    </div>
                    <template>
                      <div
                        class="file-list_item"
                        v-for="(item, fileIndex) in fileListV"
                        :key="fileIndex"
                        @mouseenter="fileListShowClose(item)"
                        @mouseleave="fileListHidClose(item)"
                      >
                        <el-tooltip :content="item.name" placement="top">
                          <span class="file-list_item_name">{{
                            item.name
                          }}</span>
                        </el-tooltip>
                        <span>{{ item.time }}</span>
                        <div
                          class="file-list_item_checkbox"
                          v-if="orderData.is_distribution != 3"
                        >
                          <el-checkbox v-model="item.isBeyond">{{
                            item.isBeyond ? "是" : "否"
                          }}</el-checkbox>
                        </div>
                        <div
                          class="file-list_item_input"
                          v-if="orderData.is_distribution != 3"
                        >
                          <el-input
                            v-if="item.isBeyond"
                            v-model.number="item.claimValue"
                            size="small"
                          ></el-input>
                        </div>

                        <div class="fr ml20 closeIcon" v-if="item.close">
                          <i
                            class="el-icon-close"
                            @click="closeFileList(item, fileIndex)"
                          ></i>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
                <el-upload
                  v-if="
                    orderData.status == '定稿文件发送中' &&
                    index == 0 &&
                    orderData.is_frozen == 2
                  "
                  ref="upload"
                  class="fr"
                  multiple
                  :auto-upload="true"
                  :on-change="handleChangeByok"
                  :action="
                    baseUrl +
                    'api/order/' +
                    orderData.id +
                    '/upload/confirm/file'
                  "
                  :file-list="fileList"
                  :on-remove="handleRemove"
                  :http-request="uploadSectionFile"
                  :show-file-list="false"
                  :limit="5"
                >
                  <el-button
                    v-no-more-click:8000
                    slot="trigger"
                    size="small"
                    type="primary"
                    >选择文件</el-button
                  >
                  <el-popover
                    placement="right"
                    title="上传定稿文件"
                    width="500"
                    popper-class="tips"
                    trigger="hover">
                    <p>* 文件为文档格式：订单编号-代理人姓名-案件名称-案件类型.docx</p>
                    <i class='el-icon-info orange ml10' slot="reference"></i>
                  </el-popover>
                  <el-button
                    v-no-more-click:8000
                    style="margin-left: 10px"
                    size="small"
                    type="success"
                    @click="uploadSectionFileByok"
                    >确认上传</el-button
                  >
                </el-upload>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-collapse-transition>
    </div>
    <div class="fold">
      <div
        class="fold_header clearfloat"
        @click="orderInfoShow = !orderInfoShow"
      >
        <span class="fl">订单详情</span>
        <span class="fr">
          <i :class="orderInfoShow ? 'el-icon-arrow-down' : 'el-icon-arrow-up'">
          </i>
        </span>
      </div>
      <el-collapse-transition>
        <div v-show="orderInfoShow">
          <el-form :model="orderData" class="form">
            <el-row type="flex">
              <el-col :span="24">
                <el-form-item label="专利名称:">
                  <span>{{ orderData.patent_name }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="12">
                <el-form-item label="订单编号:">
                  <span>{{ orderData.order_number }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="专利类型:">
                  <span>{{ orderData.type }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="12">
                <el-form-item label="订单状态:">
                  <span
                    :class="
                      orderData.status == '已撤案'
                        ? 'font_danger'
                        : 'font_success'
                    "
                    >{{ orderData.status }}</span
                  >
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联络人:">
                  <span>{{ orderData.liaisons }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="12">
                <el-form-item label="联络人邮箱：">
                  <span>{{ orderData.liaisons_email }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联络人电话：">
                  <span>{{ orderData.liaisons_tel }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="12">
                <el-form-item  label="第一发明人：">
                  <span >{{orderData.first_user_name || ''}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item  label="发明人">
                  <span>{{orderData.user_name}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="12">
                <el-form-item label="代理人：">
                  <span
                    v-if="orderData.agent"
                    :class="
                      orderData.agent.type == '离职'
                        ? 'font_danger'
                        : 'font_success'
                    "
                    >{{ orderData.agent | agentNumAddName }}</span
                  >
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="专属顾问：">
                  <span class="font_success" v-if="orderData.process">{{
                    orderData.process | processNumber
                  }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="24">
                <el-form-item label="技术问题：">
                  <span>{{ orderData.problem }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="24">
                <el-form-item label="技术方案：">
                  <span>{{ orderData.plan }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="24">
                <el-form-item label="项目优势：">
                  <span>{{ orderData.advantage }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="24">
                <el-form-item label="备注：">
                  <span>{{ orderData.remarks }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="12">
                <el-form-item label="附图：">
                  <div
                    v-if="orderData.img != '' || orderData.img != null"
                    class="preview-img-wrap"
                  >
                    <pre-img
                      :smallImg="orderData.imgList"
                      :bigImg="orderData.imgList2"
                      class="pre-img"
                    >
                    </pre-img>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="附件：">
                  <div
                    v-if="orderData.file != '' || orderData.file != null"
                    style="height: 40px;-webkit-display:flex;
                    display:flex;
                    font-size: 20px
                    -webkit-align-items:center;
                    align-items:center;"
                  >
                    <a
                      v-for="item in orderData.fileArr"
                      :key="item.id"
                      :href="
                        baseUrl +
                        '/api/download?path=' +
                        item.file +
                        '/' +
                        item.path
                      "
                      :download="item.path"
                      :title="item.path"
                      class="el-icon-tickets file_sh"
                    ></a>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- v-if='student_upload' -->
            <el-row type="flex">
              <el-col :span="24">
                <el-form-item label="导师审核文件：">
                  <div
                    v-if="
                      orderData.student_review_file != '' &&
                      orderData.student_review_file != null
                    "
                    style="height: 40px;-webkit-display:flex;
                    font-size: 20px
                    display:flex;
                    -webkit-align-items:center;
                    align-items:center;"
                  >
                    <a
                      v-for="item in orderData.studentFile"
                      :key="item.id"
                      :href="
                        baseUrl +
                        '/api/download?path=' +
                        item.file +
                        '/' +
                        item.path
                      "
                      :download="item.path"
                      :title="item.path"
                      class="el-icon-tickets file_sh"
                    ></a>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row
              type="flex"
              v-if="
                orderData.review_file != '' && orderData.review_file != null
              "
            >
              <el-col :span="24">
                <el-form-item label="内容审查文件：">
                  <div
                    style="height: 40px;-webkit-display:flex;
                    font-size: 20px
                    display:flex;
                    -webkit-align-items:center;
                    align-items:center;"
                  >
                    <a
                      v-for="item in orderData.reviewfileArr"
                      :key="item.id"
                      :href="
                        baseUrl +
                        '/api/download?path=' +
                        item.file +
                        '/' +
                        item.path
                      "
                      :download="item.path"
                      :title="item.path"
                      class="el-icon-tickets file_sh"
                    ></a>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row
              type="flex"
              v-if="
                orderData.confirm_file != '' && orderData.confirm_file != null
              "
            >
              <el-col :span="24">
                <el-form-item label="定稿文件：">
                  <div
                    style="height: 40px;-webkit-display:flex;
                    font-size: 20px
                    display:flex;
                    -webkit-align-items:center;
                    align-items:center;"
                  >
                    <a
                      v-for="item in orderData.confimFiles"
                      :key="item.id"
                      :href="
                        baseUrl +
                        '/api/download?path=' +
                        item.file +
                        '/' +
                        item.path
                      "
                      :download="item.path"
                      :title="item.path"
                      class="el-icon-tickets file_sh"
                    ></a>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <template v-if="orderData.status == '上报文件上传中'">
              <el-row v-if="orderData.grades" type="flex">
                <el-col :span="12">
                  <el-form-item label="服务态度：">
                    <el-rate
                      disabled
                      class="agetn-rate"
                      show-score
                      allow-half
                      :value="Number(orderData.grades.attitude)"
                    >
                    </el-rate>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="撰写质量：">
                    <el-rate
                      disabled
                      show-score
                      class="agetn-rate"
                      allow-half
                      :value="Number(orderData.grades.quelity)"
                    >
                    </el-rate>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="orderData.grades" type="flex">
                <el-col :span="12">
                  <el-form-item label="撰写耗时：" class="flex-form">
                    <el-rate
                      disabled
                      show-score
                      allow-half
                      class="agetn-rate"
                      :value="Number(orderData.grades.take_time)"
                    >
                    </el-rate>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="用户评价：">
                    {{ orderData.grades.remark }}
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
          </el-form>
        </div>
      </el-collapse-transition>
    </div>

    <!-- 案件冻结 弹窗 -->
    <el-dialog
      title="申请冻结"
      :visible.sync="frozen_type"
      width="40%"
      center
      :append-to-body="true"
    >
      <el-form
        ref="frozen_form"
        :rules="rules"
        :model="frozen_form"
        label-width="160px"
        label-position="top"
        class="demo-ruleForm"
      >
        <el-form-item label="申请理由：" prop="reason">
          <el-input
            v-model="frozen_form.reason"
            placeholder="请输入申请冻结原因"
          ></el-input>
        </el-form-item>
        <el-form-item label="冻结时间：" prop="frozen_date">
          <el-input
            v-model="frozen_form.frozen_date"
            placeholder="请输入冻结时间(可不填，默认30天)"
          ></el-input>
        </el-form-item>
        <el-upload
          class="upload-demo"
          :action="uploadFileUrl"
          :on-preview="handlePreview"
          :on-remove="pictureRemove"
          :on-success="pictureSuccess"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :before-upload="beforeUpload"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">申请冻结截图</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/jpeg/png/gif文件，且不超过10M
          </div>
        </el-upload>
      </el-form>
      <div slot="footer">
        <el-button
          v-no-more-click:8000
          type="primary"
          @click="applyFrozenPost('frozen_form')"
          >确认冻结</el-button
        >
      </div>
    </el-dialog>
    <upload-fee ref="upload-fee" @refresh="refresh"></upload-fee>

    <orderRescindDialog ref="orderRescindDialog" @refresh="refresh" />
  </el-dialog>
</template>

<script>
import preImg from "~/components/pre-img";
import { intervalTime } from "~/util";
import aes from "~/util/aes.js";
import moment from "moment";
import axios from "axios";
import uploadFee from "./upload-fee";
import orderRescindDialog from './orderRescind-dialog'
export default {
  components: {
    preImg,
    orderRescindDialog,
    uploadFee,
  },
  data() {
    var checkFrozen_date = (rule, value, callback) => {
      if (value === "" || value == undefined || value == null) {
        callback();
      } else {
        if (value > 30) {
          callback(new Error("申请冻结时间不得大于30天"));
        } else if (!/(^[1-9]\d*$)/.test(value)) {
          callback(new Error("请输入整数"));
        } else {
          callback();
        }
      }
    };
    return {
      showBtns: false,
      uploadFileUrl: global.baseurl + "/api/upload/file",
      frozen_type: false,
      frozen_form: {
        reason: "",
        frozen_date: "",
      },
      rules: {
        reason: [
          { required: true, message: "请输入申请冻结原因", trigger: "blur" },
        ],
        frozen_date: [
          { required: true, validator: checkFrozen_date, trigger: "blur" },
        ],
      },
      isShow: false,
      orderData: {},
      opDateMax: 1, //状态里最大的id是多少
      order_id: null,
      baseUrl: global.baseurl,
      steps_text: [
        "提交申请",
        "接单",
        "案件撰写",
        // "案件质控",
        "发送定稿文件",
        "发明人定稿",
        // "案件上传",
        "递交国知局",
      ],
      // steps_text: this.stepsText,
      step_status: "success",
      processProgress: false,
      orderInfoShow: false,
      fileList: [],
      fileListV: [],
      fileBtnLoading: false,
      sameDay: {
        isSameDay: false,
        same_day_number: "",
      },
      orderNumbers: [],
      queryOrderNumbers: [],
      orderNumberQuery: "",
      student_finish: false,
      student_upload: false,
      pic_List: [],
      WithdrawDialog: false,
      //案件完成可撤案数
      finishNum: null,
    };
  },
  mounted() {},
  computed: {
    sumDate() {
      let start = new Date(),
        now = new Date();
      if (Object.keys(this.orderData).length > 0) {
        start = this.orderData.pick_up_date
          ? this.orderData.pick_up_date
          : this.orderData.created_at;
      }
      return intervalTime(start, now, true).split("天")[0];
    },
  },
  watch: {
    orderData: {
      handler: function (val) {
        val = this.orderData.statuss;
        let teacher = this.$store.state.user.is_teacher;

        if (teacher == 2) {
          this.student_finish = true;
        } else {
          this.student_finish = false;
        }
      },
      // immediate: true,
      deep: true,
    },
  },
  methods: {
    showPayBtns() {
      this.showBtns = !this.showBtns;
    },
    beforeUpload(file) {
      let that = this;
      let canUpload = true; //是否能够上传（布尔值）
      let type = file.name.substring(file.name.lastIndexOf(".") + 1);
      //不区分大小写
      if (!/jpg|jpeg|png|gif/i.test(type)) {
        that.$message({
          message: "文件格式只能是jpg/jpeg/png/gif",
          type: "warning",
        });
        canUpload = false;
      }
      let size = file.size / 1024 / 1024;
      if (size > 10) {
        that.$message({
          message: "文件大小不能超过10M",
          type: "warning",
        });
        canUpload = false;
      }
      return canUpload;
    },
    pictureRemove(file, fileList) {
      let that = this;
      if ("response" in file) {
        //从服务器也删除此文件
        that.$axios.delete("/api/delete/file", {
          data: {
            path: file.response.data,
          },
        });
        this.pic_List = [];
      } else {
      }
    },
    pictureSuccess(response, file, fileList) {
      this.pic_List.push(file);
    },
    handlePreview(file) {},
    handleExceed(files, fileList) {
      this.$message.warning("当前限制选择 3 张图片");
    },

    show(data) {
      this.order_id = data.id;
      this.getInfo();
      // this.isShow = true
      // this.opDateMax = 0
    },
    getInfo() {
      let params = {
        order: this.order_id,
      };
      this.$axios
        .get(`api/order/${this.order_id}`, { params: params })
        .then((res) => {
          if (res.data.code == 200) {
            this.interceptFile(res.data.data);
            this.orderData = res.data.data;
            if (this.orderData.finish >= 5 && this.orderData.finish < 10) {
              this.finishNum = 1;
            } else if (this.orderData.finish >= 10 && this.orderData.finish < 15) {
              this.finishNum = 2;
            } else if (this.orderData.finish >= 15) {
              this.finishNum = 3;
            } else {
              this.finishNum = 0;
            }

            this.orderData.pick_up_date = Math.abs(
              (new Date(res.data.data.pick_up_date) - new Date().getTime()) /
                (1000 * 60 * 60)
            );
            this.showProcess(this.orderData);
            this.isShow = true;
          }
        });
    },
    interceptFile(data) {
      //图片 切分组件
      if (data.thumb_imgs == null || data.thumb_imgs == "") {
      } else {
        let img_Arr = data.thumb_imgs.split("&");
        let img_Arr2 = data.img.split("&");
        data.imgArr = [];
        data.imgList = [];
        data.imgList2 = [];
        for (const i in img_Arr2) {
          data.imgList2.push(global.baseurl + "/storage/upload/" + img_Arr2[i]);
        }
        for (const i in img_Arr) {
          let itemobj = {
            id: i + 1,
            path: img_Arr[i],
            file: "",
          };
          data.imgList.push(global.baseurl + "/storage/upload/" + img_Arr[i]);
          let itemArr = itemobj.path.split("/");
          itemobj.path = itemArr[itemArr.length - 1];
          itemobj.file = itemArr.slice(0, 2).join("/");
          data.imgArr.push(itemobj);
        }
      }
      //文件 切分组件
      if (data.file == null || data.file == "") {
      } else {
        let file_Arr = data.file.split("&");
        data.fileArr = [];
        for (const i in file_Arr) {
          let itemobj = {
            id: i + 1,
            path: file_Arr[i],
            file: "",
          };
          let itemArr = itemobj.path.split("/");
          itemobj.path = itemArr[itemArr.length - 1];
          itemobj.file = itemArr.slice(0, 2).join("/");
          data.fileArr.push(itemobj);
        }
      }
      // 导师审核文件
      if (data.student_review_file == null || data.student_review_file == "") {
      } else {
        let file_Arr = data.student_review_file.split("&");
        data.studentFile = [];
        for (const i in file_Arr) {
          let itemobj = {
            id: i + 1,
            path: file_Arr[i],
            file: "",
          };
          let itemArr = itemobj.path.split("/");
          itemobj.path = itemArr[itemArr.length - 1];
          itemobj.file = itemArr.slice(0, 2).join("/");
          data.studentFile.push(itemobj);
        }
      }
      //已完成文件 切分组件
      if (data.fish_file == null || data.fish_file == "") {
      } else {
        let fishfileArr = data.fish_file.split("&");
        data.fishfileArr = [];
        for (const i in fishfileArr) {
          let itemobj = {
            id: i + 1,
            path: fishfileArr[i],
            file: "",
          };
          let itemArr = itemobj.path.split("/");
          itemobj.path = itemArr[itemArr.length - 1];
          itemobj.file = itemArr.slice(0, 2).join("/");
          data.fishfileArr.push(itemobj);
        }
      }
      // 审核文件切分成数组
      if (data.review_file == null || data.review_file == "") {
      } else {
        let fileArr = data.review_file.split("&");
        data.reviewfileArr = [];
        for (const i in fileArr) {
          let itemobj = {
            id: i + 1,
            path: fileArr[i],
            file: "",
          };
          let itemArr = itemobj.path.split("/");
          itemobj.path = itemArr[itemArr.length - 1];
          itemobj.file = itemArr.slice(0, 2).join("/");
          data.reviewfileArr.push(itemobj);
        }
      }
      // 撤案申请文件
      if (data.reason_file == null || data.reason_file == "") {
      } else {
        let reasonfileArr = data.reason_file.split("&");
        data.reasonfileArr = [];
        for (const i in reasonfileArr) {
          let itemobj = {
            id: i + 1,
            path: reasonfileArr[i],
            file: "",
          };
          let itemArr = itemobj.path.split("/");
          itemobj.path = itemArr[itemArr.length - 1];
          itemobj.file = itemArr.slice(0, 2).join("/");
          data.reasonfileArr.push(itemobj);
        }
      }
      // 定稿文件
      if (data.confirm_file == null || data.confirm_file == "") {
      } else {
        let confimFiles = data.confirm_file.split("&");
        data.confimFiles = [];
        for (const i in confimFiles) {
          let itemobj = {
            id: i + 1,
            path: confimFiles[i],
            file: "",
          };
          let itemArr = itemobj.path.split("/");
          itemobj.path = itemArr[itemArr.length - 1];
          itemobj.file = itemArr.slice(0, 2).join("/");
          data.confimFiles.push(itemobj);
        }
      }
    },
    refresh(data) {
      this.$emit("refresh");
      this.isShow = false;
    },
    intervalTime(startTime, endTime) {
      var date1 = new Date(startTime); //开始时间
      var date2 = new Date(endTime); //结束时间
      var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
      //计算出相差天数
      var days = (date3 / (24 * 3600 * 1000)).toFixed(1);
      //计算出小时数

      var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
      var hours = (leave1 / (3600 * 1000)).toFixed(1);
      //计算相差分钟数
      var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
      var minutes = (leave2 / (60 * 1000)).toFixed(1);

      //计算相差秒数

      var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000);
      // return days + "天 " + hours + "小时 " + minutes + "分钟" + seconds + " 秒";

      if (days > 0) {
        return days + "天";
      } else {
        if (hours > 0) {
          return hours + "小时";
        } else {
          return minutes + "分钟";
        }
      }
      // return days + "天"
    },
    showProcess(row) {
      // steps_text: [
      //   "提交申请",
      //   "接单",
      //   "案件撰写",
      //   "发送定稿文件",
      //   "发明人定稿",
      //   "递交国知局",
      // ],
      let list = row.statuss.map((item) => item.id);

      if (list.includes(8)) {
        this.opDateMax = 6;
        return;
      }

      if (list.includes(7)) {
        this.opDateMax = 6;
        return;
      }

      if (list.includes(15)) {
        this.opDateMax = 2;
        return;
      }
      if (list.includes(13)) {
        this.opDateMax = 5;
        return;
      }
      if (list.includes(10)) {
        this.opDateMax = 4;
        return;
      }
      if (list.includes(5)) {
        this.opDateMax = 2;
        return;
      }
      if (list.includes(3)) {
        this.opDateMax = 3;
        return;
      }

      if (list.includes(2)) {
        this.opDateMax = 2;
        return;
      }
      if (list.includes(1)) {
        this.opDateMax = 1;
        return;
      }
    },
    //上传定稿文件
    handleChangeByok(file, fileList) {
      let tempList = []; //可以上传的文件
      for (let i = 0; i < fileList.length; i++) {
        let canUpload = true; //是否可以上传
        let that = this;
        //验证文件类型
        let fileName = fileList[i].name;
        //文件切成数组 然后去判断格式
        let fileNameArr = fileName
          .substring(that.orderData.order_number.length + 1)
          .split("-");
        let arrLen = fileName.split("-").length;
        let orderNum = fileName.substr(0, that.orderData.order_number.length);
        //获取后缀名 必须是文档格式
        let pos = fileName.lastIndexOf(".");
        let lastName = fileName.substring(pos, fileName.length);
        if (
          // lastName.toLowerCase() !== ".doc" &&
          lastName.toLowerCase() !== ".docx"
        ) {
          that.$message.error("文件必须为.docx格式");
          canUpload = false;
        } else if (fileNameArr.length != 3) {
          that.$message.error(
            "请按照格式：(订单编号-代理人-案件名称-专利类型.docx),修改文件名后重新上传"
          );
          canUpload = false;
        } else if (orderNum != that.orderData.order_number) {
          that.$message.error("文件名中订单编号与订单不符合，请修改后重新上传");
          canUpload = false;
        } else if (fileNameArr[0] != that.orderData.agent.name) {
          that.$message.error("代理人姓名不一致");
          canUpload = false;
        } else if (
          !/^(发明专利|实用新型|外观设计)$/.test(
            fileNameArr[fileNameArr.length - 1].split(".")[0]
          )
        ) {
          that.$message.error(
            "案件类型必须是【发明专利, 实用新型, 外观设计】中的一种"
          );
          canUpload = false;
        }
        if (canUpload) {
          tempList.push(fileList[i]);
        }
      }
      this.fileListV.splice(0, this.fileListV.length, ...tempList);
      for (let i = 0; i < this.fileListV.length; i++) {
        let nowTime = moment().format("YYYY-MM-DD HH:mm:ss");
        this.$set(this.fileListV[i], "time", nowTime);
        this.$set(this.fileListV[i], "isBeyond", false);
        this.$set(this.fileListV[i], "claimValue", 0);
        this.$set(this.fileListV[i], "close", false);
      }
      fileList.splice(0, fileList.length, ...tempList);
      return;
    },

    handleRemove(file, fileList) {
      this.fileListV = fileList;
    },

    uploadSectionFileByok() {
      if (this.fileListV == 0) {
        this.$message({
          type: "warning",
          message: "请选择需要上传的文件！",
        });
        return;
      }
      this.completeFilePost();
    },
    completeFilePost(args) {
      this.fileBtnLoading = true;
      // FormData 对象
      var form = new FormData();
      // 文件对象
      for (let i in this.fileListV) {
        form.append(
          i == 0 ? "file" : "file" + (i * 1 + 1),
          this.fileListV[i].raw
        );
      }
      form.append("order", this.orderData.id);
      if (this.sameDay.isSameDay) {
        let sameDayNumbers = [];
        for (let i = 0; i < this.orderNumbers.length; i++) {
          if (this.orderNumbers[i].isSelect) {
            sameDayNumbers.push(this.orderNumbers[i].value);
          }
        }
        let same_day_number = sameDayNumbers.join(",");
        form.append("same_day_number", same_day_number);
      }
      let claimArr = [];
      let claim_item = "";
      for (let i = 0; i < this.fileListV.length; i++) {
        claimArr.push(this.fileListV[i].claimValue);
      }
      claim_item = claimArr.join(",");
      form.append("claim_item", claim_item);

      let url = `/api/order/${this.orderData.id}/agency/send/file`;
      axios({
        method: "post",
        url: this.baseUrl + url,
        data: form,
        headers: {
          "Content-Type": "multipart/form-data",
          Authorization: "Bearer " + this.$store.state.token,
        },
      }).then((res) => {
        if (res.data.status == "success") {
          this.$message({
            type: "success",
            message: "上传成功",
          });
          // this.dialogVisible = false;
          this.fileBtnLoading = false;
          this.handleClose();
          this.$emit("refresh");
        } else {
          this.fileBtnLoading = false;
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
      });
    },

    fileListHidClose(item) {
      item.close = false;
    },
    fileListShowClose(item) {
      item.close = true;
    },
    closeFileList(item, index) {
      this.fileListV.splice(index, 1);
      this.$refs["upload"][0].uploadFiles.splice(index, 1);
    },
    uploadSectionFile(params) {},
    // 查询同日提交案件编号
    queryChanged(value) {
      let data = this.queryOrderNumbers.filter((item) => {
        return item.value.search(value) > -1;
      });
      this.orderNumbers = data;
    },
    // 删除同日提交订单编号
    closeOrderNumber(item, index) {
      this.orderNumbers[index].isSelect = false;
    },
    // 获取可同日提交案件
    sameDayCheckChange(value) {
      if (value) {
        let params = {
          order_number: this.orderData.order_number,
        };
        this.$axios
          .get("api/order/agent/list", { params: params })
          .then((res) => {
            if (res.data.code == 200) {
              let data = res.data.data;
              for (let i = 0; i < data.length; i++) {
                let item = {
                  value: data[i],
                  index: i,
                  isSelect: false,
                  close: false,
                };
                this.orderNumbers.push(item);
                this.queryOrderNumbers = this.orderNumbers;
              }
            }
          });
      } else {
        this.orderNumbers = [];
        this.sameDay.same_day_number = "";
      }
    },
    handleClose() {
      // this.student_upload = false
      this.student_finish = false;
      this.fileList = [];
      this.fileListV = [];
      this.fileListByok = [];
      this.orderNumbers = [];
      this.sameDay = {
        isSameDay: false,
        same_day_number: "",
      };
      this.orderNumberQuery = "";
      this.isShow = false;
    },

    upLoadImg() {
      this.$refs["upload-fee"].showOn(this.orderData);
    },
    goPay() {
      this.$router.replace({
        name: "payment",
        query: {
          order_id: this.orderData.id,
          order: this.orderData.id,
          from: this.$route.path,
        },
      });
    },

    // 申请冻结订单
    applyFrozen(data) {
      this.frozen_order_id = data.id;
      this.frozen_type = true;
      // this.$prompt('请输入申请理由', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
      //   customClass: 'promptClass',
      //   inputErrorMessage: '申请理由不能为空！'
      // }).then(({ value }) => {
      //   this.applyFrozenPost(data.id, value)
      // }).catch(() => {

      // })
    },
    applyFrozenPost(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.pic_List.length != 0) {
            let id = this.frozen_order_id;
            let url = `/api/order/${id}/apply_frozen`;
            var formData = new FormData();
            this.pic_List.forEach((v, i) => {
              if (i == 0) {
                formData.append("img", v.raw);
              } else {
                formData.append(`img${i}`, v.raw);
              }
            });
            if (this.frozen_form.frozen_date) {
              // formData.append("img", this.pic_List)
              formData.append("frozen_day", this.frozen_form.frozen_date);
              formData.append("reason", this.frozen_form.reason);
            } else {
              // formData.append("img", this.pic_List)
              formData.append("frozen_day", 30);
              formData.append("reason", this.frozen_form.reason);
            }
            axios({
              method: "post",
              url: this.baseUrl + url,
              data: formData,
              headers: {
                "Content-Type": "multipart/form-data",
                Authorization: "Bearer " + this.$store.state.token,
              },
            }).then((res) => {
              if (res.data.code == 200) {
                this.$alert(
                  "已提交冻结案件申请成功，请等待管理员审核。",
                  "提示",
                  {
                    confirmButtonText: "确定",
                    center: true,
                    callback: (action) => {},
                  }
                );
                this.frozen_form.frozen_date = "";
                this.frozen_form.reason = "";
                this.frozen_type = false;
                this.getInfo();
              } else {
                this.$alert(res.data.message, "提示", {
                  confirmButtonText: "确定",
                  center: true,
                  callback: (action) => {},
                });
              }
            });
          } else {
            // this.$message('申请冻结图片不能为空')
            let id = this.frozen_order_id;
            let url = `/api/order/${id}/apply_frozen`;
            var formData = new FormData();
            if (this.frozen_form.frozen_date) {
              formData.append("frozen_day", this.frozen_form.frozen_date);
              formData.append("reason", this.frozen_form.reason);
            } else {
              formData.append("frozen_day", 30);
              formData.append("reason", this.frozen_form.reason);
            }
            axios({
              method: "post",
              url: this.baseUrl + url,
              data: formData,
              headers: {
                "Content-Type": "multipart/form-data",
                Authorization: "Bearer " + this.$store.state.token,
              },
            }).then((res) => {
              if (res.data.code == 200) {
                this.$alert(
                  "已提交冻结案件申请成功，请等待管理员审核。",
                  "提示",
                  {
                    confirmButtonText: "确定",
                    center: true,
                    callback: (action) => {},
                  }
                );
                this.frozen_type = false;
                this.getInfo();
              } else {
                this.$alert(res.data.message, "提示", {
                  confirmButtonText: "确定",
                  center: true,
                  callback: (action) => {},
                });
              }
            });
          }
        } else {
        }
      });
    },
    // 解除冻结
    relieveFrozen(data) {
      this.$alert("确定解除该案件的冻结吗?", "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.relieveFrozenPut(data.id);
        },
      });
    },
    relieveFrozenPut(id) {
      let params = {
        order: id,
      };
      this.$axios.put(`api/order/${id}/un_freeze`, params).then((res) => {
        if (res.data.code == 200) {
          this.$alert(
            "解除冻结成功！该案件将继续计时，请尽快完成案件",
            "提示",
            {
              confirmButtonText: "确定",
              center: true,
              callback: (action) => {},
            }
          );
          this.getInfo();
          this.$emit("refresh");
        } else {
          this.$alert(res.data.message, "提示", {
            confirmButtonText: "确定",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
    orderRescind () {
      this.$refs['orderRescindDialog'].show(this.orderData)
    }
  },
};
</script>

<style lang="less" scoped>
.order-info {
  &_title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: rgba(53, 53, 53, 1);
    margin-bottom: 20px;
  }
  /deep/.el-dialog {
    width: 70%;
    min-width: 1000px;
    .el-dialog__close {
      font-size: 20px;
    }
    .el-dialog__body {
      padding-top: 10px;
    }
  }
  .el-form-item__content {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: rgba(53, 53, 53, 1);
    margin-bottom: 20px;
  }
  /deep/.form {
    .el-form-item {
      height: 100%;
      border: 1px solid #ccc;
      margin-right: -1px;
      margin-bottom: -1px;
      // border-bottom-width: 0;
      .el-form-item__label {
        // background:rgba(194,227,255,1);
        text-align: left;
        font-size: 15px;
        color: #555555;
        padding-left: 20px;
      }
      .el-form-item__content {
        // background:rgba(244,247,255,1);
        padding-left: 20px;
        text-align: left;
        color: #555555;
      }
    }
    .el-row {
      .el-col-12 {
        .el-form-item {
          border-bottom-width: 0;
        }
      }
      .el-col-24 {
        .el-form-item {
          border-bottom: 0px;
        }
      }
    }
    .el-row:last-child {
      .el-col-12 {
        .el-form-item {
          border-bottom-width: 1px;
        }
      }
      .el-col-24 {
        .el-form-item {
          border-bottom: 1px solid #ccc;
        }
      }
    }
    .pre-img {
      margin-top: 8px;
    }
  }
  /deep/.el-steps {
    margin-top: 60px;
    margin-bottom: 20px;
    .el-step {
      .el-step__main {
        width: 100%;
        .el-step__title {
          text-align: center;
          font-size: 15px;
          width: 100%;
          line-height: 20px;
          font-size: 15px;
          color: rgba(85, 85, 85, 1);
        }
        .is-wait {
          color: rgba(181, 181, 181, 1);

          .el-step__icon {
          }
        }
      }
      .is-wait {
        .el-step__icon {
          .el-step__icon-inner {
            display: none;
          }
        }
      }

      .is-success {
        .el-step__line {
          background-color: rgba(36, 157, 255, 1);
        }
        .el-step__icon {
          background: rgba(36, 157, 255, 1);
          color: #fff;
          border-color: rgba(36, 157, 255, 1);
        }
      }
    }
    .el-step:nth-child(odd) {
      .el-step__main {
        position: absolute;
        top: -40px;
      }
    }
    .el-step:nth-child(even) {
      .el-step__main {
        margin-top: 15px;
      }
    }

    .el-steps--vertical {
      width: 420px;
      margin: 0 auto;
    }
  }
  /deep/.el-timeline {
    .el-timeline-item {
      padding-bottom: 10px;
      .el-timeline-item__tail {
        display: block;
        border-color: rgba(36, 157, 255, 1);
        left: 120px;
      }
      .time {
        position: absolute;
        left: 0;
        font-size: 15px;
        min-width: 100px;
      }
      .title {
        font-size: 15px;
        color: rgba(63, 63, 63, 1);
        line-height: 40px;
        font-weight: 700;
      }
      .el-timeline-item__node {
        border: 1px solid rgba(36, 157, 255, 1);
        background: #fff;
        position: relative;
        display: flex;
        left: 115px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
      }
      .el-timeline-item__node::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;

        width: 7px;
        height: 7px;
        background: rgba(36, 157, 255, 1);
      }
      .el-timeline-item__wrapper {
        padding-left: 148px;
        .el-timeline-item__timestamp {
          margin-bottom: 15px;
        }
      }
      // .el-timeline-item__content {
      //   zoom: 1;
      // }
      // .el-timeline-item__content::after {
      //   content: "";
      //   display: block;
      //   height: 0;
      //   clear: both;
      //   visibility: hidden;
      // }
    }
  }
  /deep/.el-rate {
    margin-top: 9px;
    // height: 40px;
    // line-height: 40px;
  }
  // /deep/.el-timeline:last-child {
  //   .el-timeline-item {
  //     .el-timeline-item__tail {
  //       display: none;
  //     }
  //   }
  // }
  .fold {
    &_header {
      height: 40px;
      margin-bottom: 20px;
      line-height: 40px;
      font-size: 15px;
      font-family: Source Han Sans CN;
      font-weight: 300;
      color: rgba(199, 199, 199, 1);
      border-bottom: 1px solid rgba(220, 220, 220, 1);
      i {
        line-height: 1;
        font-size: 17px;
      }
    }
  }
  .file-list {
    &_item {
      color: #58a5ea;
      font-size: 15px;
      &_name {
        max-width: 200px;
        display: inline-block;
        line-height: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .file-list_item_checkbox {
        margin-left: 20px;
        display: inline-block;
      }
      .file-list_item_input {
        display: inline-block;
        width: 80px;
        margin-left: 20px;
      }
      .closeIcon {
        font-size: 18px;
        line-height: 1;
      }
    }
    .sameDay {
      width: 300px;
      display: inline-block;
      line-height: 1;
    }
    .numbers {
      color: #58a5ea;
      font-size: 15px;
      line-height: 30px;
      .numberItem {
        // border: 1px solid #ccc;
        width: 487px;
        display: inline-block;
      }
    }
  }
  /deep/.tips {
    .tips_1 {
      color: midnightblue;
      line-height: 20px;
    }

    .tips_2 {
      color: red;
      line-height: 20px;
    }
  }
}
.showSuccess {
  color: #4cd137;
}
.showError {
  color: #e84118;
}
</style>
